<template>
  <div class="main-bg">
    <div class="first">
      <el-row >
        <el-button class="el-icon-delete" type="primary" @click="delClick()" size="mini">
        批量清除
        </el-button>
      </el-row>
      <div style="height:5px;">&nbsp;</div>
      <!-- 用户搜索选项组组件 -->
      <vsearchtag  @toSearchFilter="toSearchFilter" :chooseParams="pageinfo.params.findParams" />
      <div style="height:5px;">&nbsp;</div>
    </div>
    <el-table
      size="small"
      border
      :row-class-name="tableRowClassName"
      style="width:100%"
      :max-height="slide_h"
      @header-contextmenu="showMenu"
      :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
      :data="data.data"
      ref="table"
      highlight-current-row
      @current-change="cellClick"
    >
      <!--<el-table-column label="#"  width="50">-->
        <!--<template slot-scope="scope">-->
          <!--<el-radio :label="scope.row.id" v-model="radio">&nbsp;</el-radio>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column   width="90" prop="id" label="ID"/>
      <el-table-column width="120">
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.userName"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column prop="urlName" label="接口名称"/>
      <el-table-column >
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.address"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column width="120">
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.ip"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.ip}}
        </template>
      </el-table-column>
      <el-table-column width="140" prop="os" label="操作系统"/>
      <el-table-column width="100" prop="browserName" label="浏览器"/>
      <el-table-column width="140">
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.createTime"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
    </el-table>
    <div class="first">
      <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"/>
    </div>
  </div>
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  const dialog = () =>
    import ("@/components/modules/sysManagement/bank/view_dialog_editsysBank")
  import tsearchtag from "@/components/search/template_tag_search"
  import tproper from "@/components/search/template_proper_search"
  export default {
    inject:["reload"],
    components: {
      "v-page": pagination,
      "v-dialog": dialog,
      "vproper": tproper,
      "vsearchtag":tsearchtag
    },
    data() {
      return {
        isadd: false,
        dialoginfo: {},
        dialogshow: 0,
        dialogurl: "",
        isajax: false,
        data: "",
        slide_h:document.body.offsetHeight - (224),
        loadingTxt: "",
        radio: "",
        currentData: "",
        pageinfo: this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.sysAccessLog),
        search: ""
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllAccessLog,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllAccessLog,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
          this.data = res;
          this.pageinfo.pages = res.pages;
          this.pageinfo.total = res.total;
        })
      },
      cellClick(currentRow,oldCurrentRow) {
        if(currentRow!=undefined){
          this.currentData = currentRow;
          this.radio = currentRow.id
        }
      },
      changepaginfo() {
        this.$store.commit("savePageInfo",this.pageinfo);
        // console.log(this.pageinfo);
        this.init();
      },
      changedialogshow() {
        this.dialogshow = 0;
      },
      toSearchFilter(){
        this.currentData = "";//需要初始化一下选中状态
        this.radio = "";
        this.pageinfo.params.page=1;
        this.init();
      },
      delClick(){
        this.$prompt('你想删除多少天之前的所有记录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[1-9]\d{0,2}$/,
          inputErrorMessage: '只允许填写数字,不能以0开头。最多100天之前'
        }).then(({ value }) => {
          this.$confirm('你确定删除'+value+'天之前的所有访问记录吗?', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            callback: action => {
              if(action=="confirm"){
                this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.delAccessLogBeforeDay,lock:1,text:this.loadingTxt});
                this.proAPI.postJson(this.proAPI.URLS.delAccessLogBeforeDay,{"day":value}).then((res)=>{
                  this.$message.success({
                    "message":res.message
                  })
                  this.reload();
                })
              }
            }
          });
        }).catch(() => {

        });


      },
    },
    mounted() {
      this.init();
    },
    updated() {
      // console.log(333);
    },
    afterCreated() {

    }
  }
</script>
<style scoped>
  .el-table .success-row {
    background: #f0f9eb;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .success {
    text-color: #67C23A
  }

  .danger {
    text-color: #F56C6C
  }
  .mgbottom {
    margin-bottom: 5px;
  }

  .imgMiddle {
    height: 37px;
    vertical-align: middle
  }
</style>
